<template>
	<div class="register">
		<van-nav-bar :title="title" fixed left-arrow @click-left="back" />
		<div class="content">
			<div class="loginBox">
				<div class="list">
					<van-cell-group>
						<van-field v-model="username" clearable :left-icon="user" placeholder="请输入用户名" @input="getData" />
						<van-field v-model="password" clearable type="password" :left-icon="pass" placeholder="请输入密码" @input="getData" />
						<van-field v-model="repassword" clearable type="password" :left-icon="pass" placeholder="确认密码" @input="getData" />
						<van-field v-model="mobile" clearable placeholder="请输入11位手机号" @input="getData" />
						<van-field v-model="code" center clearable placeholder="请输入短信验证码" @input="getData">
							<template #button>
								<van-button size="small" color="#fe7600" @click="getCode">{{codeName}}</van-button>
							</template>
						</van-field>
					</van-cell-group>

					<div class="button-login" :class="allow?'':'opc'" @click="toCompleteInfo">下一步</div>
					<div class="toLogin">已有账号，<router-link to="/login">去登录</router-link>
					</div>
				</div>
			</div>


		</div>
	</div>
</template>

<script>
	import user from "@/assets/img/username.png"
	import pass from "@/assets/img/password.png"
	import tu from "@/assets/img/tu.png"
	import activeIcon from "@/assets/img/checkedstatus.png"
	import inactiveIcon from "@/assets/img/nochoose.png"
	export default {
		name: "Register",
		components: {

		},
		data() {
			return {
				title: "用户注册",
				value: "",
				user: user,
				pass: pass,
				tu: tu,
				radio: '',
				activeIcon: activeIcon,
				inactiveIcon: inactiveIcon,
				codeName: '获取验证码',
				checked: false,
				allow: false,
				username: '',
				mobile: '',
				password: '',
				repassword: '',
				code: '',
				timer: null,
				count: 0
			}
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			checkCode(){
				let checkData = {
					captcha: this.code,
					mobile: this.mobile,
					event: "register"
				}
				let registerData = {
					username:this.username,
					mobile:this.mobile,
					password:this.password
				}
				this.$api.login.check(checkData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.$localStorage.set("registerData",registerData)
						this.$router.push({
							path: "/completeInfo"
						})
					}else{
						this.$toast.fail(res.msg)
					}
				})
			},
			toCompleteInfo() {

				
				if (this.allow) {
					if (this.username == '' || this.mobile == '' || this.password == '' || this.repassword == '' || this.code == '') {
						this.$toast("请将信息填写完整")
					} else {
						if (this.password != this.repassword) {
							this.$toast("两次密码不一致，请重新输入！")
						} else {

							this.$api.login.checkUsername({
								"username": this.username
							}).then(res => {
								if (res.code == 1) {
									this.checkCode()
								} else {
									this.$toast(res.msg)
								}
							})
							


						}
					}
				} else {
					return false
				}

			},
			
			getData() {
				if (this.username == '' || this.mobile == '' || this.password == '' || this.repassword == '' || this.code == '') {
					this.allow = false
				} else {

					this.allow = true

				}
			},
			getCode() {
				const TIME_COUNT = 10;
				let that = this
				if (!this.timer) {
					let sendData = {
						mobile: this.mobile,
						event: "register"
					}
					this.$api.login.send(sendData).then(res => {
						if (res.code == 1) {
							this.$toast(res.msg)
							this.count = TIME_COUNT;
							this.timer = setInterval(() => {

								if (that.count > 0 && that.count <= TIME_COUNT) {
									that.count--;
									this.codeName = that.count + 's'

								} else {

									clearInterval(that.timer);
									this.codeName = "重新发送"
									that.timer = null;

								}

							}, 1000)
						} else {
							this.$toast.fail(res.msg)
						}
					})
				}
			},
		}


	}
</script>

<style scoped lang="less">
	.register {
		padding-top: 46px;
		background: #fff;
		position: absolute;
		height: 100%;
		width: 100%;
		bottom: 0;

		.van-nav-bar {
			.van-icon {
				color: #000;
			}

			.van-nav-bar__text {
				color: #5C5C5C;
			}
		}

		.content {
			padding-top: 1rem;


			.loginBox {
				background: rgba(255, 255, 255, 1);
				border-radius: 0.5rem;
				padding: 1rem 2.16rem;

				.list {
					.van-cell {
						height: 2.75rem;
						border: 1px solid rgba(229, 229, 229, 1);
						border-radius: 2rem;
						margin-bottom: 0.72rem;
						padding-left: 1.63rem;

						input {
							padding-left: 0.7rem;
							background: none;

							&::placeholder {
								font-size: 0.81rem;
								font-family: PingFang SC;
								font-weight: 500;
								color: rgba(204, 204, 204, 1);
							}

							&:focus {
								background-color: none;
							}
						}
					}

					.space {
						font-size: 0.81rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(38, 38, 38, 1);
						line-height: 0.75rem;
						padding: 1rem 1rem;
					}

					.img-icon {
						height: 1.25rem;
					}

					p {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(254, 118, 0, 1);
						line-height: 0.75rem;
						margin-bottom: 0.81rem;
						text-align: right;
					}

					.button-login {
						height: 2.75rem;
						background: rgba(254, 118, 0, 1);
						border-radius: 2rem;
						font-size: 0.94rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 2rem;
						margin-top: 2rem;

						&.opc {
							opacity: 0.26;
						}
					}

					.toLogin {
						font-size: 0.88rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: #505050;
						line-height: 0.75rem;
						text-align: center;

						a {
							color: #FE7600;
						}
					}

					.button-register {
						height: 2.75rem;
						border-radius: 2rem;
						font-size: 0.94rem;
						font-family: PingFang SC;
						border: 1px solid rgba(254, 118, 0, 1);
						font-weight: 500;
						color: #FE7600;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.huanying {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(122, 122, 122, 1);
						line-height: 0.75rem;
						text-align: center;
						margin-top: 1.22rem;
					}
				}
			}

			.bg {
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 10.1rem;
				}
			}
		}

		.van-hairline--top-bottom::after,
		.van-hairline-unset--top-bottom::after {
			display: none;
		}
	}

	.van-radio-group {
		display: flex;
		margin-bottom: 1rem;
	}

	.van-radio {

		font-size: 0.81rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(66, 66, 66, 1);
		line-height: 0.75rem;
		margin-right: 1.78rem;
	}

	.van-checkbox {
		font-size: 0.81rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(66, 66, 66, 1);
		margin: 0.78rem 0;
	}
</style>
